<template>
    <div class="makerList">
        <div class="makerList_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">添加银行卡<i class="el-icon-close"></i></div>
		</div>
        <div class="maker">
               <div class="nuews">
                   <div style=" display: inline-block;">银行卡管理/添加银行卡</div>
					<button @click="prev()">返回</button>
				</div>
        </div>
            
            <div class="makerList_table">
                <div class="makerList_bottom_table">
                    <h3>银行卡</h3>
				</div>
				<div class="makerList_bottom_page">
                   <el-form ref="form" :model="form" label-width="120px">
                        <el-form-item label="开户银行">
                            <el-select v-model="form.bank_id" filterable placeholder="请选择">
                                <el-option
                                v-for="item in bankList"
                                :key="item.bank_id"
                                :label="item.bank_name"
                                :value="item.bank_id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="银行卡号">
                            <el-input v-model="form.bank_account"></el-input>
                        </el-form-item>
                        <el-form-item label="所在支行">
                            <el-input v-model="form.bank_zh_name"></el-input>
                        </el-form-item>
                        <el-form-item label="银行预留手机号">
                            <el-input v-model="form.mobile"></el-input>
                        </el-form-item>
                        <el-form-item label="银行卡图片">
                            <div class="bankImg">
                                <el-upload class="avatar-uploader"
                                    style="border: 1px dashed #d9d9d9;"
                                    action="/api/admin/base/uploadfile"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </div>
                        </el-form-item>
                        <el-form-item label="开户名">
                            <el-input v-model="form.account_name"></el-input>
                        </el-form-item>
                    </el-form>
                   <div class="btn">
                        <el-button @click="prev()">取消</el-button>
                        <el-button type="danger" @click=" getBalance()">确定</el-button>
                   </div>
                   <el-dialog
                        title="绑定银行卡"
                        :visible.sync="dialogVisible_bank"
                        @closed='closedFn'
                        width="30%">
                        <div class="codeBox">
                            验证码将发送至您的手机，请注意接收！
                            <el-input type="text" maxlength="4" v-model="sms_code" placeholder="请输入验证码"></el-input>
                            <el-button type="primary" :disabled="changeCode" @click="changeCodeFn">重新获取<span v-if="changeCode">（{{codeNum}}）</span></el-button>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible_bank=false">取 消</el-button>
                            <el-button type="primary" @click="toAddSubmit">确定添加</el-button>
                        </span>
                    </el-dialog>
				</div>
            </div>
        </div>
    <!-- </div> -->
</template>

<script>
export default {
    data(){
        return{
            bankList:[],
            form:{
                bank_id:"",
                bank_account:"",
                mobile:"",
                account_name:"",
                bank_zh_name:"",
                level:'',
                imageUrl:'',
                imageId:null,
            },
            dialogVisible_bank:false,
            changeCode:true,
            codeNum:60,
            sms_code:'',
            card_id:'',
            timer:null
        }
    },
	mounted(){
        this.form.level = this.$route.query.level
        console.log(this.form.level,'添加银行卡时的level');
		this.getBindCard()
	},
    beforeDestroy(){
        clearInterval(this.timer)
    },
    methods: {
        // 银行卡图片
        handleAvatarSuccess(res, file,fileList){
            console.log(fileList,'银行卡图片');
            this.form.imageUrl = fileList[0].response.data.url
            this.form.imageId = fileList[0].response.data.id
        },
        beforeAvatarUpload(file){
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传商品图片大小不能超过 2MB!');
            }
            return isLt2M;
        },

		// 获取银行卡列表
		getBindCard(){
			this.$api.searchBKList().then(res=>{
				if(res.code==1){
					this.bankList = res.data.list?res.data.list:[]
				}
			})
		},
        isPhone(t) {
			     return /^1[3|4|5|6|7|8|9]\d{9}$/.test(t);
		},
		// 绑定银行卡
        getBalance(){
            if(this.form.bank_id == '') {
                this.$message({
                    showClose: true,
                    message: '请选择开户银行',
                    type: 'error'
                });
                return
            }else if(this.form.bank_account == '') {
                this.$message({
                    showClose: true,
                    message: '请输入银行卡号',
                    type: 'error'
                });
                return
            }else if(this.form.bank_zh_name == '') {
                this.$message({
                    showClose: true,
                    message: '请输入所在支行',
                    type: 'error'
                });
                return
            }else if(this.form.mobile == '') {
                this.$message({
                    showClose: true,
                    message: '请输入预留手机号',
                    type: 'error'
                });
                return
            }else if(!this.isPhone(this.form.mobile)) {
                this.$message({
                    showClose: true,
                    message: '手机号号码格式不对',
                    type: 'error'
                });
                return
            }else if(this.form.account_name == '') {
                this.$message({
                    showClose: true,
                    message: '请输入开户名',
                    type: 'error'
                });
                return
            };
            if(!this.form.imageId){
                this.$message({
                    showClose: true,
                    message: '请上传银行卡图片',
                    type: 'error'
                });
                return
            }
            this.$api.bindList(this.form).then(res=>{
                console.log(res,'添加结果');
                if(res.code==1){
                    this.card_id = res.data.bank.card_id
                    this.dialogVisible_bank = true
                    this.$message({
                        showClose: true,
                        message: '短信验证码已发送!',
                        type: 'success'
                    }); 
                    let that = this
                    this.timer = setInterval(function(){
                        that.codeNum--
                        if(that.codeNum<0){
                            that.changeCode = false
                            that.codeNum = 60
                            clearInterval(that.timer)
                        }
                    },1000)
                }else{
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: 'error'
                    });
                }
            })
			
        },

        // 关闭对话框后
        closedFn(){
            clearInterval(this.timer)
            this.codeNum = 60
            this.sms_code = ''
        },

        // // 取消按钮
        // cancelBtn(){
        //     clearInterval(this.timer)
        //     this.dialogVisible_bank = false
        //     this.codeNum = 60
        // },

        // 验证码确定
        toAddSubmit(){
            if(this.sms_code==''){
                this.$message.warning('请输入验证码')
                return
            }
            this.$http.post('/api/admin/Bank/checkBankSms',{sms_code:this.sms_code,card_id:this.card_id}).then(res=>{
                console.log(res,'验证结果');
                if(res.code==1){
                    this.$message({
                        showClose: true,
                        message: '添加成功',
                        type: 'success'
                    }); 
                    this.sms_code = ''
                    this.card_id = ''
                    this.form = {
                        bank_id:"",
                        bank_account:"",
                        mobile:"",
                        account_name:"",
                        bank_zh_name:"",
                        level:0,
                        imageUrl:'',
                        imageId:null,
                    }
                    this.dialogVisible_bank = false
                }else{
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: 'error'
                    });
                }
            })
        },

        // 重新获取验证码
        changeCodeFn(){
            let that = this
            this.timer = setInterval(function(){
                that.codeNum--
                if(that.codeNum<0){
                    that.codeNum = 60
                    that.changeCode = false
                    clearInterval(that.timer)
                }
            },1000)
            this.$http.post('/api/admin/base/sendsms',{mobile:this.form.mobile}).then(res=>{
                if(res.code==1){
                    this.$message({
                        showClose: true,
                        message: '短信验证码已发送!',
                        type: 'success'
                    }); 
                }else{
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: 'error'
                    });
                }
            })
        },

        // 

          prev(){
            this.$router.go(-1)
         }
    },
}
</script>

<style lang="less" scoped>
    @import 'addCard.less';
</style>